<template>
  <div class="myhoteldetail">
    <div class="myhoteldetail-title">
      <p>{{ xdaddresvalue }}</p>
    </div>
    <!-- //标题 -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    >
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- //下拉菜单 -->
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value"
        :options="options"
        @change="choosezhi"
      />
      <van-dropdown-item title="筛选" ref="item">
        <van-cell center title="包邮">
          <template #right-icon>
            <van-switch v-model="switch1" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <van-cell center title="团购">
          <template #right-icon>
            <van-switch v-model="switch2" size="24" active-color="#ee0a24" />
          </template>
        </van-cell>
        <div style="padding: 5px 16px">
          <van-button type="danger" block round @click="onConfirm">
            确认
          </van-button>
        </div>
      </van-dropdown-item>
    </van-dropdown-menu>
    <!-- //数据展示 -->
    <div>
      <myhoteldetaildata
        v-for="item in list"
        :key="item.id"
        :item="item"
        @click="gototobuy"
      ></myhoteldetaildata>
    </div>
  </div>
</template>

<script>
import myhoteldetaildata from "@/detail/myhoteldetaildata.vue";
import { getdetaildata } from "@/detail/detaildata.js";
export default {
  components: {
    myhoteldetaildata,
  },
  data() {
    return {
      //选择的城市
      xdaddresvalue: "",
      //下拉菜单的数据
      item: null,
      value: 0,
      switch1: false,
      switch2: false,
      options: [
        { text: "综合排序", value: 0 },
        { text: "销量最多", value: 1 },
        { text: "价格从低到高", value: 2 },
        { text: "价格从高到低", value: 3 },
      ],
      //列表数据
      list: [],
    };
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    onConfirm() {
      this.item.toggle();
    },
    //请求数据
    fetchdata() {
      getdetaildata().then((res) => {
        console.log(res.data);
        this.list = res.data.hoteldata;
      });
    },
    //选择时排序
    choosezhi(val) {
      if (val == 2) {
        //销量从低到高
        this.list.sort((a, b) => {
          return a.price - b.price;
        });
      } else if (val == 3) {
        //销量从告到底
        this.list.sort((a, b) => {
          return b.price - a.price;
        });
      } else if (val == 1) {
        //热度从高到低
        this.list.sort((a, b) => {
          return b.visit - a.visit;
        });
      } else {
        return;
      }
    },
    //去购物
    gototobuy() {
      this.$router.push("/buy");
    },
  },
  mounted() {
    this.$bus.on("getaddresvalue", (val1) => {
      this.xdaddresvalue = val1;
    });
    this.fetchdata();
  },
};
</script>

<style lang="scss" scoped>
.myhoteldetail {
  width: 375px;
  &-title {
    position: fixed;
    width: 255px;
    height: 25px;
    margin-left: 60px;
    text-align: center;
    z-index: 4;
  }
}
</style>
